<template>
    <div class="px-4 py-2">
        <var-card>
            <template #description>
                <var-form>
                    <var-radio-group v-model="formData.gender">
                        <var-radio :checked-value="0">保密</var-radio>
                        <var-radio :checked-value="1">男</var-radio>
                        <var-radio class="ml-2" :checked-value="2">女</var-radio>
                    </var-radio-group>
                </var-form>
                <var-space direction="column" :size="[14, 0]">
                    <var-button block type="primary" @click="validate()">
                        保存修改
                    </var-button>
                </var-space>
            </template>
        </var-card>
    </div>
</template>

<script setup >
import { reactive, onMounted } from "vue";
import { loginStore } from "@/store/user";
import { postData } from "@/utils/api";
const store = loginStore();
let user = "";
if (store.getUserInfo?.userInfo == undefined) {
    user = store.getUserInfo;
} else {
    user = JSON.parse(store.getUserInfo?.userInfo);
}
const formData = reactive({
    gender: "",
});

onMounted(() => {
    formData.gender = Number(user.sex);
    console.log(user)
})
const validate = async () => {
    await postData("student/updateSex", {
        id: user.id,
        sex: String(formData.gender)
    }).then((res) => {
        const { data } = res;
        if (data.code == 0) {
            Snackbar.success({
                content: data.msg,
                position: 'bottom'
            })
        } else {
            Snackbar.error({
                content: data.msg,
                position: 'bottom'
            })
        }
        store.addUser(data.data)
    });
};
</script>

<style scoped>
:deep(.var-card__container) {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
}

:deep(.var-card__title) {
    margin: 4px;
}

:deep(.var-icon) {
    font-size: large;

}
:deep(.var-radio__text){
    font-size: 8px;
}
</style>